<template>
	<view class="flex-col page">
		<!-- <view class="flex-col group">
			<image class="image"
				src="https://ide.code.fun/api/image?token=67c65ba2defdb1001116d210&name=f7ef1c09f4b4c7e398c5e20507795e83.png" />
			<view class="flex-row justify-between items-center mt-15-5">
				<image class="image_3"
					src="https://ide.code.fun/api/image?token=67c65ba2defdb1001116d210&name=fb39e5ef97d7cb530394d4a9228364ca.png" />
				<view class="flex-row items-center section">
					<image class="image_2"
						src="https://ide.code.fun/api/image?token=67c65ba2defdb1001116d210&name=bf228806b83d6080d824f9f9708a7c71.png" />
					<image class="ml-12 image_4"
						src="https://ide.code.fun/api/image?token=67c65ba2defdb1001116d210&name=39226e2a2fd1386def2a3fd39b6eece7.png" />
				</view>
			</view>
		</view> -->
		<u-navbar title=" " back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="flex-col section_2">
			<video :src="videoUrl" play-strategy="1"
				object-fit="cover"
				:vslide-gesture-in-fullscreen="false"
				 @loadedmetadata="onVideoLoaded"
				 style="width: 100%;height: 52vh;">
			</video>
			<view class="flex-row justify-end self-stretch" style="position: absolute;top: 30rpx;right: 30rpx;">
				
				<view @click="delVideo" class="flex-col justify-start items-center text-wrapper"><text class="font text">删除</text></view>
				<view @click="saveVideo" class="flex-col justify-start items-center text-wrapper_2 ml-8-5"><text class="font">保存</text>
				</view>
			</view>
			<!-- <text class="self-end text_2">00:04</text> -->
		</view>
		<view class="flex-col group_2">
			<view class="flex-row justify-between items-center group_3">
				<text class="text_3">视频分类</text>
				<view class="flex-row items-center section_3" @click="openAddCatePop">
					<image class="shrink-0 image_5"
						src="https://terminator.axu9.com/images/edit/add-icon.png" />
					<text class="text_4 ml-2-5">添加分类</text>
				</view>
			</view>
			<view @click="openCateSelect" class="flex-row justify-between items-center section_4">
				<text class="text_5">{{selectCate != '' ? selectCate : '请选择分类' }}</text>
				<image class="image_6"
					src="https://terminator.axu9.com/images/edit/bottom-icon.png" />

			</view>
		</view>

		<u-popup v-model="addCatePop" mode="center">
			<view class="flex-col section_44">
				<text class="self-center text_22">视频分类</text>
				<view class="flex-col justify-start items-start self-stretch text-wrapper_3">
					<!-- <text class="font1 text_33">请输入新增分类</text> -->
					<input style="padding-left: 20rpx;color: #fff;" type="text" v-model="cateName" placeholder="请输入新增分类" />
				</view>
				<view class="flex-row self-stretch group_22">
					<view @click="cancelPop" class="flex-col justify-start items-center text-wrapper_4"><text
							class="font_2 text_44">取消</text></view>
					<view @click="confirmPop" class="flex-col justify-start items-center text-wrapper_5 ml-13-5"><text
							class="font_22">确定</text></view>
				</view>
			</view>
		</u-popup>
		<!-- <u-select v-model="cateSelect" :list="cateList" value-name="id" label-name="name" @confirm="cateSelectConfirm"></u-select> -->
		<PickerGreen :show="cateListShow" :list="cateSelectList" :title="title" :min="1" :max="0" :cancelColor="cancelColor"
			:confirmColor="confirmColor" :cancelText="cancelText" :confirmText="confirmText" @cancel="cancel"
			@confirm="confirm"></PickerGreen>
	</view>
</template>

<script>
	import {
		getCateList,
		createCate,
		editVideo,
		delVideo
	} from "@/api/edit.js"
	import PickerGreen from '../../components/pickerGreen/index.vue';
	export default {
		components: {
			PickerGreen
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				cateName: '',//分类名称
				addCatePop: false,
				cateSelect: false,
				cateSelectList: [],
				cancelText: '取消',
				confirmText: '确定',
				confirmColor: '#fff',
				cancelColor: '#999999',
				title: '选择分类',
				cateListShow: false,
				cateList: [{
						title: '门店环境',
						id: '1'
					},
					{
						title: '菜品',
						id: '2'
					}
				],
				selectCate: '',//选中分类标题
				selectCateId: '',//选中分类id
				videoUrl: '',
				isLoading: false,
				videoId: ''
			}
		},
		onLoad(options) {
			this.videoUrl = options.url;
			this.videoId = options.id;
			console.log(options,'videoUrl')
			this.getCateList()
		},
		methods: {
			// 删除视频
			delVideo(){
				var _this = this;
				uni.showModal({
				    title: '提示',
				    content: '是否删除该视频,删除后不可恢复?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							_this.delVideoConfirm()
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			delVideoConfirm(){
				delVideo({
					id: his.videoId
				}).then(res => {
					if(res.errno == 0){
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						uni.reLaunch({
							url: '/pagesEditVideo/videoList/index'
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 保存
			saveVideo(){
				if(this.selectCateId == ''){
					uni.showToast({
						title: '请选择分类',
						icon: 'none'
					})
					return
				}
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.showLoading({
					title: '加载中'
				})
				editVideo({
					url: this.videoUrl,
					cate_id: this.selectCateId,
					id: this.videoId
				}).then(res => {
					uni.hideLoading()
					this.isLoading = false
					if (res.errno == 0) {
						uni.reLaunch({
							url: '/pagesEditVideo/videoList/index'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					this.isLoading = false
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			async getCateList(){
				
				// getCateList({
				// 	uid: uni.getStorageSync("userId")
				// }).then(res => {
				// 	console.log(res,'resssssssssss')
				// 	this.cateList = res.data;
				// 	if(this.cateList.length > 0){
				// 		this.cate_id = this.cateList[0].id
				// 		this.cateSelectList = this.cateList.map(item => {
				// 			return {
				// 				label: item.name,
				// 				id: item.id
				// 			}
				// 		})
						
				// 		this.getVideoList()
						
				// 	}
					
				// })
				var result = await getCateList({uid: uni.getStorageSync("userId")})
				if(result.errno == 0){
					this.cateList = result.data
					this.cateSelectList = this.cateList.map(item => {
								return {
									label: item.name,
									id: item.id
								}
							})
				}
				
			},
			confirmPop(){
				if(this.cateName == ''){
					uni.showToast({
						title: '请输入分类名称',
						icon: 'none'
					})
					return
				}
				if(this.isLoading){
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.showLoading({
					title: '加载中'
				})
				createCate({
					uid: uni.getStorageSync("userId"),
					name: this.cateName
				}).then(res => {
					uni.hideLoading()
					this.isLoading = false
					if (res.errno == 0) {
						this.addCatePop = false
						this.getCateList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					this.isLoading = false
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
				
			},
			onVideoLoaded(event) {
				console.log(event, 'eventeventevent')
			},
			openAddCatePop() {
				this.addCatePop = true
			},
			openCateSelect() {
				this.cateListShow = true
			},
			cateSelectConfirm(e) {
				console.log(e, 'cateSelectConfirm')
				this.selectCate = e[0].label
				this.selectCateId = e[0].value
			},
			cancelPop(){
				this.addCatePop = false
			},
			cancel(){
				this.cateListShow = false;
			},
			confirm(data){
				this.cateListShow = false;
				this.selectCate = this.cateSelectList[data].label
				this.selectCateId = this.cateSelectList[data].id
			},
			// confirmPop(){
			// 	this.addCatePop = false
			// },
		}
	}
</script>
<style lang="less" scoped>
	// /deep/ .u-drawer-bottom {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.ml-8-5 {
		margin-left: 17rpx;
	}

	.mt-307-5 {
		margin-top: 615rpx;
	}

	.ml-2-5 {
		margin-left: 5rpx;
	}

	.page {
		/* padding-bottom: 466rpx; */
		background-color: #111113;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 34rpx 20rpx 41rpx;
	}

	.image {
		margin-left: 42rpx;
		margin-right: 13rpx;
		width: 655rpx;
		height: 24rpx;
	}

	.image_3 {
		width: 20rpx;
		height: 35rpx;
	}

	.section {
		margin-right: 13rpx;
		padding: 14rpx 27rpx;
		background-color: #ffffff33;
		border-radius: 32rpx;
		height: 65rpx;
	}

	.image_2 {
		width: 62rpx;
		height: 38rpx;
	}

	.image_4 {
		width: 35rpx;
		height: 35rpx;
	}

	.section_2 {
		position: relative;
		/* background-image: url('https://terminator.axu9.com/images/edit/add-video-poster.png');
		background-size: 100% 100%;
		background-repeat: no-repeat; */
		
	}

	.text-wrapper {
		padding: 14rpx 0;
		background-color: #424350cc;
		border-radius: 12rpx;
		width: 108rpx;
		height: 54rpx;
	}

	.font {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text {
		opacity: 0.8;
	}

	.text-wrapper_2 {
		padding: 14rpx 0;
		background-color: #00e587;
		border-radius: 12rpx;
		width: 108rpx;
		height: 54rpx;
	}

	.text_2 {
		margin-right: 5rpx;
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 23rpx;
		position: absolute;
		bottom: 28rpx;
		right: 38rpx;
	}

	.group_2 {
		margin-top: 47rpx;
		padding-left: 31rpx;
		padding-right: 28rpx;
	}

	.group_3 {
		padding-bottom: 32rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 27rpx;
	}

	.section_3 {
		margin-right: 3rpx;
		padding: 14rpx 12rpx;
		background-color: #00e587;
		border-radius: 8rpx;
		height: 48rpx;
	}

	.image_5 {
		width: 18rpx;
		height: 18rpx;
	}

	.text_4 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 21rpx;
	}

	.section_4 {
		padding: 32rpx 31rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.text_5 {
		color: #dddddd;
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.image_6 {
		width: 22rpx;
		height: 12rpx;
	}

	.ml-13-5 {
		margin-left: 27rpx;
	}

	.font1 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.font_22 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 27rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_44 {
		padding: 47rpx 40rpx 0;
		background-color: #212123;
		border-radius: 30rpx;
	}

	.text_22 {
		color: #dddddd;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}

	.text-wrapper_3 {
		margin-top: 27rpx;
		padding: 32rpx 0;
		background-color: #303032;
		border-radius: 16rpx;
		width: 480rpx;
	}

	.text_33 {
		margin-left: 23rpx;
		color: #dddddd;
		font-weight: unset;
	}

	.group_22 {
		padding: 32rpx 0 62rpx;
	}

	.text-wrapper_4 {
		padding: 26rpx 0;
		background-color: #303032;
		border-radius: 16rpx;
		width: 226rpx;
		height: 80rpx;
	}

	.text_44 {
		color: #dddddd;
		line-height: 26rpx;
	}

	.text-wrapper_5 {
		padding: 26rpx 0;
		background-color: #00e587;
		border-radius: 16rpx;
		width: 226rpx;
		height: 80rpx;
	}
</style>